<template>
  <div class="graph" >
    <div class="main">
      <div class="input" id="content" >
        <el-input  placeholder="请输入内容" 
          @keyup.enter.native="entitySearch()" v-model="inputQuery" >
          <el-button  slot="append" icon="el-icon-search" @click="entitySearch(true)">
          </el-button>
        </el-input>
      </div>
      <!-- 图谱中心 -->
      <EntitySearchBoard
        ref="searchBoard"
        @init-property="initPropertyHandler"
        @editor-action="dispatchEditorAction"
      ></EntitySearchBoard>
    </div>
    <el-card class="entityinfo" v-if="this.selectedItem.type === 'node'">
    
      <p>实体名：{{ this.selectedItem.item.name }}</p>
      <p>实体类型：{{ this.selectedItem.item.group }}</p>
      <p v-for="(value,key) in this.selectedItem.item.properties" :key='key'>{{key}}：{{value}}</p>
    </el-card>
  </div>
  </template>
  
  <script >
  import EntitySearchBoard from './EntitySearchBoard'
  import {mapGetters, mapActions} from 'vuex'
  import {getEntity} from '../../../api/http.js'
  import {get} from '../record.js'
  import {chat} from '../../../api/http.js'
  import {recordURL} from '../../../api/config'
  // Vue.use(get)
  
  //取消选中并且取消右键操作
  document.body.onselectstart =
    document.body.oncontextmenu =
      function () {
        return false; //取消浏览器默认操作
      };
  
  var is_recording = false;
  var host = location.origin;
  var recorder;
  
  
  export default {
    name: 'EntitySearch',
    props: {
      // projectId: {
      //   type: Number
      // },
      nodes: {
        type: Array
      },
      links: {
        type: Array
      }
    },
    components: {
      EntitySearchBoard
    },
    data() {
      return {
        projectId: 0,
        inputQuery: '',
        projectInfo: {},
        graphData: null,
        graphProperty: {
          layoutMode: 'FORCE',
          nodeScale: null
        },
        dtSearch: () => {
        },
        dSearch: () => {
        },
        entityData:'',
        showPNG: true,
        result: '',
        textModel: '',
        disabled: true,
        selectedItem: {
          type: null,
          item: {}
        },
      }
    },
    computed: {
      ...mapGetters(['userId'
        // 'graphData',
        // 'projectInfo',
      ]),
      
    },
    methods: {
      ...mapActions({
        getProjectInfoAct: 'getProjectInfo',
        getProjectGraphDataAct: 'getProjectGraphData',
        entityQueryGlobal:'entityQueryGlobal',
        entityQueryGlobalMultiName:'entityQueryGlobalMultiName'
      }),
      /***** 重新挂载图谱 *****/
      mountGraphData(data) {
        this.selectedItem.type = null
        this.selectedItem.item = {}
        console.log('projectInfo:', this.projectId)
        console.log('daataaaaa'+data)
        this.origin = deepCopy(data)
        // this.projectInfo = deepCopy(projectInfo)
        const projectInfo = this.getProjectInfoAct(this.projectId)
        const {nodes, links, layouts} = data
        this.nodes = [...nodes]
        console.log("项目所有节点849561：" + JSON.stringify(this.nodes))
        this.links = [...links]
        this.layouts = deepCopy(layouts)
        this.init()
        this.flags.loaded = true
      },
      entitySearch() {
        this.selectedItem.type = null
        this.selectedItem.item = {}
        if(this.inputQuery === '') {
          this.$message.warning("内容不能为空！")
        } 
        else {
          const data = {
            "entityId": 0,
            "entityName": this.inputQuery,
            "fuzzyQuery": true,
            "projectId": 0
            }
            // 图谱结果
          this.entityQueryGlobal(data).then((res) => {
              console.log("搜索结果"+res.data)
              
              if(res!==null){
                console.log("搜索结果1"+res.nodes)
                if(res.nodes.length === 0){ 
                  console.log("搜索结果2"+JSON.stringify(res['nodes']))
                  this.graphData = res
                  const nodeSearch = this.$refs.searchBoard
                  nodeSearch.mountGraphData(this.graphData)
                  this.$message.warning('图谱结果为空！')
                }else{
                  this.graphData = res
                  const nodeSearch = this.$refs.searchBoard
                  nodeSearch.mountGraphData(this.graphData)
                }
              }
              else {
                this.$message.warning('搜索过程发生错误！')
              }
            })
              
        }    
      },
      dispatchEditorAction(name, ...args) {
        console.log(`[EditorAction] ${name}`, args)
        // this.showEditor = true
        // this.$refs.searchBoard.dispatchEditorAction(name, ...args)
        this.selectedItem.type = 'node'
        this.selectedItem.item = args[0]
        const pro = args[0].properties
        
        console.log('this.selectedItem.item',this.selectedItem.item)
      },
  
      initPropertyHandler(name, value) {
        // console.log(`[InitProperty] ${name}`)
        this.graphProperty[name] = value
      },
      record() {
        if (is_recording) {
          is_recording = false;
          this.stopRecording()
          document.getElementById('record_btn')
          this.showPNG = true
          // .src = '../../../assets/record.png'
        } else {
          is_recording = true;
          this.disabled = false
          this.startRecording()
          document.getElementById('record_btn')
          this.showPNG = false
          this.disabled = true
          // .src = '../../../assets/recording.gif'
          }
      },
      // 开始录音
      startRecording() {
        // let url = 'ws://' + location.hostname + ':5001';
        let url = recordURL;
        console.log("url",url)
        const textarea = document.getElementById('result_p')
        console.log("textarea",textarea)
        console.log("textarea",textarea.value)
        get(function (record) {recorder = record;}, url, textarea);
      },
      // 停止录音
      stopRecording() {
       this.result = recorder.stop(); 
       console.log("最后的结果",this.result.value) 
       this.inputQuery = this.result.value
      },
  
    },
    // async mounted() {
      
    //   const {search, userId} = this
      
    //   // const projectId = this.projectId
    //   // if (projectId !== NaN){
    //   //   const projectInfo = await this.getProjectInfoAct(projectId)
    //   //   let key
        
    //   //   if (!projectInfo) {
    //   //     // warning
    //   //     return
    //   //   }
    //   //   this.projectInfo = projectInfo
    //   // }
      
  
    //   //初始化图谱数据
    //   const graphData = await this.getProjectGraphDataAct(projectId)
  
    //   // const graphData = deepCopy(_graphData)
    //   if (!graphData) {
    //     // warning
    //     return
    //   }
    //   this.graphData = graphData
    //   console.log("初始化图谱数据结果09123012："+JSON.stringify(this.graphData))
  
    //   const nodeSearch = this.$refs.searchBoard
    //   console.log(nodeSearch)
    //   nodeSearch.mountGraphData(this.graphData)
  
    //   console.log('graphData:', graphData)
    // }
  }
  </script>
  
  <style scoped>
  .graph {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: stretch;
    background-color: rgb(17, 22, 42);
    overflow: hidden;
  }
  
  .graph > .main {
    flex: 1;
    position: relative;
  }
  

  
  .input { 
    width: 40%;
    position: fixed;
    top:7%;
    left: 29%;
  }
  .input .el-input .el-input__inner  {
    border-radius: 50px;
  }

  .main .el-icon-loading{
    /* margin-top: 19%; */
    margin-left: 47%;
    font-size: 24px;
  }
  .graph .entityinfo{
    text-align: left;
    justify-content: center;
    width: 18%;
    height: 60%;
    position: fixed;
    right: 20px;
    top:30%;
    margin-right: 20px;
    font-size: 15px;
    font-weight: 350;
    color: #ffffff;
    border-radius: 4px;
    background-color: rgb(17, 22, 42);
    /* border: 0.1px solid rgb(58, 166, 181); */
    border: 0;
    overflow-y: auto;
  }
.graph .el-card::-webkit-scrollbar {
    width: 4px;
}
.graph .el-card::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(94, 94, 94, 0.2);
}
.graph .el-card::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(94, 94, 94, 0.1);}

 
  </style>
  